<template>
  <div>
    <div class="list">
      <ul>
        <li
          v-for="(item, index) in letters"
          :key="index"
          :ref="item"
          @click="handleLetterClick"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array
    }
  },
  data () {
    return {
      // 标识位（给touchstart开始时才能启动touchmove)
      touchStatus: false
    }
  },
  computed: {
    letters () {
      const letters = []
      for (var i = 0; i < this.data.length; i++) {
        letters.push(this.data[i])
      }
      return letters
    }
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
      // console.log(e.target.innerText)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        const startY = this.$refs['热'][0].offsetTop
        const touchY = e.touches[0].clientY + 100
        const index = Math.floor((touchY - startY) / 20)
        if (index >= 0 && index < this.letters.length) {
          this.$emit('change', this.letters[index])
        }
        console.log(startY)
        console.log(touchY)
        console.log(index)
      }
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

<style lang="less" scoped>
.list{
  /*font-size: 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 1.58rem;
  right: 0;
  bottom: 0;*/
  position: absolute;
  z-index: 30;
  right: 3px;
  top: 50%;
  transform: translateY(-55%);
  width: 20px;
  padding: 200px 0;
  border-radius: 3px;
  text-align: center;
}
</style>
